<template>
	<view class="">
		<bg-video></bg-video>
		<cu-custom bgColor="bg-main" :isBack="false">
			<block slot="content">共享课房</block>
		</cu-custom>
		<view class="">
			<view class="padding-sm  w-25 inline-block">
				<view class="flex flex-direction align-center w-100"  @tap="toXyMain">
					<view style="font-size: 2rem;" class="bg-main menu-item round">
						<text class="iconfont icon-my text-white"></text>
					</view>
					<view class="padding-top-sm">
						<text class=" text-bold">学员主页</text>
					</view>
				</view>
			</view>

			<view class="padding-sm  w-25 inline-block">
				<view class="flex flex-direction align-center" @tap="toJlMain">
					<view style="font-size: 2rem;" class="bg-pink menu-item round">
						<text class="iconfont icon-jubaohuitubiao- text-white"></text>
					</view>
					<view class="padding-top-sm">
						<text class=" text-bold">老师主页</text>
					</view>
				</view>
			</view>
			<view class="padding-sm w-25 inline-block">
				<view class="flex flex-direction align-center" @tap="toKaike">
					<view style="font-size: 2rem;" class="bg-pink menu-item round">
						<text class="iconfont icon-shangkelaoshiwo text-white"></text>
					</view>
					<view class="padding-top-sm">
						<text class=" text-bold">老师开课</text>
					</view>
				</view>
			</view>
			<view class="padding-sm w-25 inline-block">
				<view class="flex flex-direction align-center" @tap="toFindFj">
					<view style="font-size: 2rem;" class="bg-pink menu-item round">
						<text class="iconfont icon-xinfangshuju text-white"></text>
					</view>
					<view class="padding-top-sm">
						<text class=" text-bold">我要用房</text>
					</view>
				</view>
			</view>
			
			
			<view class="padding-sm w-25 inline-block">
				<view class="flex flex-direction align-center" @tap="toBuyVip">
					<view style="font-size: 2rem;" class="bg-orange menu-item round">
						<text class="iconfont icon-huiyuangoumai text-white"></text>
					</view>
					<view class="padding-top-sm">
						<text class=" text-bold">购买会员</text>
					</view>
				</view>
			</view>
			
			<view class="padding-sm w-25 inline-block">
				<view class="flex flex-direction align-center" @tap="toFindLs">
					<view style="font-size: 2rem;" class="bg-pink menu-item round">
						<text class="iconfont icon-renyuanchaxun text-white"></text>
					</view>
					<view class="padding-top-sm">
						<text class="text-bold">寻找老师</text>
					</view>
				</view>
			</view>
			
			<view class="padding-sm w-25 inline-block">
				<view class="flex flex-direction align-center" @tap="toFindMd">
					<view style="font-size: 2rem;" class="bg-blue menu-item round">
						<text class="iconfont icon-ReStore text-white"></text>
					</view>
					<view class="padding-top-sm">
						<text class=" text-bold">查询门店</text>
					</view>
				</view>
			</view>
			
			<view class="padding-sm w-25 inline-block">
				<view class="flex flex-direction align-center" @tap="toRlyz">
					<view style="font-size: 2rem;" class="bg-main menu-item round">
						<text class="cuIcon-qrcode text-white"></text>
					</view>
					<view class="padding-top-sm">
						<text class=" text-bold">人脸验证</text>
					</view>
				</view>
			</view>
			
			<view class="padding-sm w-25 inline-block">
				<view class="flex flex-direction align-center" @tap="toBzj">
					<view style="font-size: 2rem;" class="bg-main menu-item round">
						<text class="cuIcon-redpacket text-white"></text>
					</view>
					<view class="padding-top-sm">
						<text class=" text-bold">徼保证金</text>
					</view>
				</view>
			</view>
		</view>

		<view class="bg-white">
			<view
				class="padding-sm padding-right-xs bg-main text-white align-baseline w-100">
				<!-- <text class="padding-xs inline-block radius " 
				@tap="search({kclxid:propc.akclxid})" 
				:key="propc.kclxid" 
				v-for="propc in kclxs">{{propc.lxname}}</text> -->
				<text @tap="search({})"  class="padding-xs inline-block radius ">推荐:</text>
				<text class="padding-xs inline-block radius "
				@tap="search({kclxid})" 
				:key="index" 
				v-for="(kclxid, index) in tjlx">{{kclxs[kclxid].lxname}}</text>
			</view>
			<view class="padding-sm">
				<view class="bg-white shadow radius margin-bottom-xs" v-for="(kc,index) in kcs" :key="index">
					<kc-item :path="'/pages/cxy'" :kc="kc"></kc-item>
				</view>
			</view>
		</view>

		<view v-if="kcs.length < pageInfo.total" class="padding ">
			<button @tap="loadMore" class="cu-btn block bg-main lg">显示更多</button>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				key: "",
				kclxs: this.constant.lxmap,
				kcs: [],
				tjlx: [],
				pageInfo: {
					current: 1,
					size: 16,
					total: 0,
				},
				searchObj: {
					kcname: "",
					jlid: "",
					mdid: "",
					aroomid: "",
					kclxid: "",
					zt: "",
					bx: "",
					sd: null,
					ed: null,
				},
			};
		},
		computed: {
			currentPosition: function() {
				if (this.store.state.position) {
					return this.store.state.position;
				}
				return undefined;
			}
		},
		onShareAppMessage: function(res) {
			console.log(res);
			return {
				title: '自定义分享标题',
				path: '/pages/first'
			}
		},
		onLoad: function() {
			this.init();
		},
		methods: {
			init: function() {
				this.api("/org/sm").send({}).then(data => {
					this.tjlx = data.asetting.tjlx;
				});
				this.search();
			},

			toJlMain: function() {
				uni.navigateTo({
					url: "/pages/cjl/main"
				});
			},
			toXyMain: function() {
				uni.navigateTo({
					url: "/pages/cxy/main"
				});
			},
			toKaidian: function() {
				if (!this.store.state.dz.tx) {
					this.message.info("请先设置人脸");
					uni.navigateTo({
						url: "/pages/cdz/main?tag=wd"
					});
					return;
				}
				
				if (!this.store.state.dz.dname) {
					this.message.info("请先设置店长名");
					uni.navigateTo({
						url: "/pages/cdz/main?tag=wd"
					});
					return;
				}
				uni.navigateTo({
					url: "/pages/cdz/md/new"
				});
			},
			toKaike: function() {
				if (!this.store.state.client.tx) {
					this.message.info("请先设置人脸");
					uni.navigateTo({
						url: "/pages/cjl/main?tag=wd"
					});
					return;
				}
				
				if (!this.store.state.client.nc) {
					this.message.info("请先设置昵称");
					uni.navigateTo({
						url: "/pages/cjl/main?tag=wd"
					});
					return;
				}
				
				uni.navigateTo({
					url: "/pages/cjl/kc/kaike"
				});
			},
			toFindFj: function() {
				uni.navigateTo({
					url: "/pages/cjl/fj/search"
				});
			},
			toFindLs: function() {
				uni.navigateTo({
					url: "/pages/cxy/jl/search"
				});
			},
			toFindMd: function() {
				uni.navigateTo({
					url: "/pages/cxy/md/search"
				});
			},
			toRlyz: function() {
				uni.navigateTo({
					url: "/pages/cxy/main?tag=wd"
				});
			},
			toBzj: function() {
				uni.navigateTo({
					url: "/pages/cxy/main?tag=wd"
				});
			},

			toBuyVip: function() {
				uni.navigateTo({
					url: "/pages/cxy/hy/lxlist"
				});
			},

			search: function(param) {
				this.kcs = [];
				this.pageInfo.current = 1;
				this.loadKc(param);
			},
			loadMore: function() {
				this.pageInfo.current++;
				this.loadKc();
			},
			loadKc: function(param) {
				if (param) {
					this.searchObj.kclxid = param.kclxid ? param.kclxid : null;
					this.searchObj.zt = param.zt ? param.zt : null;
					this.searchObj.bx = param.bx ? param.bx : null;
					this.searchObj.sd = param.sd ? param.sd : null;
					this.searchObj.ed = param.ed ? param.ed : null;
				}
				this.searchObj.current = this.pageInfo.current;
				this.searchObj.size = this.pageInfo.size;

				this.api("/kc/page").send(this.searchObj).then(data => {
					for (let index in data.akechengs.records) {
						let record = data.akechengs.records[index];
						this.kcs.push(record);
					}
					this.pageInfo.total = data.akechengs.total;
				});
			}

		}
	}
</script>

<style>
	.menu-item {
		width: 60px;
		height: 60px;
		display: flex;	
		justify-content: center;
		align-items: center;
	}
</style>